<!--
 * Copyright 2011 Andrey Vyrvich.
 * andry.virvich at google.com
 -->

<html>
  <head>
  	<style>
		#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
		#add_tab { cursor: pointer; }
		body {min-width: 700px;}
		.widget-header {
			float: left;
			font-size:15px;
			font-weight: bold;
			color: #eee;
			padding: 2px 5px;
		}
		table {
			width: 100%;
		}
		table tr td {
			padding:4px;
		}
		#addParcelVal{ height:25px;width:120px;font-size:14px;margin:0px;position:relative;}
	</style>
	<link type="text/css" href="css/table.css" rel="stylesheet" />
	<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
	<script>
		var $tabs,
			tracker = chrome.extension.getBackgroundPage().tracker,
			bg = chrome.extension.getBackgroundPage(),
			self = window,tabs = {};
		
		$(document).ready(function(){
			$("#help").button({icons: {
					primary: "ui-icon-help"
				},
				text: false}
			).click( function(){
				chrome.tabs.create({
					url: 'http://code.google.com/p/parcel-tracker/',
					selected : true
				});
			}).qtip({
					content: chrome.i18n.getMessage('popupHelpContent'),
					show: 'mouseover',
					hide: 'mouseout',
					padding: 15,
					position: {
						corner: {
						 target: 'leftBottom',
						 tooltip: 'rightTop'
						}
					},
					style: {
						name: 'light',
						 border: {
							width: 5,
							radius: 8,
							color: '#F58400'
						}
		 
					}
			});
			
			$("#refresh").button({
				icons: {
					primary: "ui-icon-refresh"
				},
				text: false
			}).click(function(){
				$("#loader").show();
				var selection = $tabs.tabs( "option", "selected" ),
					node = $("ul#tabsheader li a").eq(selection)
					curId = node.text();
					curPanel = node.attr("href");
				tracker.update(curId, function(id){
					$(curPanel).empty().append( tracker.parcels[curId].toHTML() ).css({padding: '1px'});
					
					
					
					$("table.pagetext").attr("cellspacing", 0);
					$("#loader").hide();
				});
			});
			$("#addParcel").button({
				icons: {
					primary: "ui-icon-plus"
				},
				text: false
			})
				.removeClass( "ui-corner-all" )
				.addClass( "ui-corner-right ui-button-icon" ).click(function(){
					$("#loader").show();
					tracker.add($("#addParcelVal").val(), function(id){
						$("#loader").hide();
						$.each(tabs, function(pid, tid){
							console.log(pid, id, tid);
							if(pid == id){
								$tabs.tabs( "remove", tid );
							}
						})
						if(id){
							addTab(id);
							$tabs.tabs( "select", $tabs.tabs( "length" ) -1 );
						} 
					});
			});
			$tabs = $("#tabs").tabs({
				tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
				add: function( event, ui ) {
					$( ui.panel ).append( tracker.parcels[ui.tab.innerText].toHTML() ).css({padding: '1px'});
				}
			});
			$.each(JSON.parse(localStorage.getItem('ids')), function(i, pid){
				addTab(pid);			
			});
			$tabs.tabs( "select", $tabs.tabs( "length" ) -1 );
		});
		//RR626990533CN
		function addTab(parcel, index){
			$tabs.tabs( "add",  parcel, parcel, index );
			tabs[parcel] = $tabs.tabs( "length" ) - 1;
			$("table.pagetext").attr("cellspacing", 0);
		}
		$( "#tabs span.ui-icon-close" ).live( "click", function() {
			var index = $( "li", $tabs ).index( $( this ).parent() );
			tracker.remove($( this ).parent().children("a").text());
			$tabs.tabs( "remove", index );
		});

	</script>
 </head>
  <body>
	
	<div id="tabs">
		<div style="text-align: right" class="ui-widget-conten">
		<span class="widget-header" i18n-content="title"></span>
		<img src="loader.gif" id="loader" style="margin-bottom:6px;vertical-align:bottom;display:none;">
		<input type="text" class="ui-state-highlight ui-corner-left" id="addParcelVal"><button id="addParcel"><span i18n-content="addParcel"></button>
		<button id="refresh"><span i18n-content="refreshParcel"></button>
		<button id="help"><span i18n-content="popupHelp"></button>
		</div>
		
		<ul id="tabsheader"></ul>

	</div>
	<script type="text/javascript">
	var i18n=function(){function i(b){b=b.querySelectorAll(l);for(var d,f=0;d=b[f];f++)for(var e=0;e<h.length;e++){var c=h[e],a=d.getAttribute(c);a!=null&&j[c](d,a)}}var j={"i18n-content":function(b,d){b.textContent=chrome.i18n.getMessage(d)},"i18n-values":function(b,d){for(var f=d.replace(/\s/g,"").split(/;/),e=0;e<f.length;e++){var c=f[e].match(/^([^:]+):(.+)$/);if(c){var a=c[1];c=chrome.i18n.getMessage(c[2]);if(a.charAt(0)=="."){a=a.slice(1).split(".");for(var g=b;g&&a.length>1;)g=g[a.shift()];if(g){g[a]=c;a=="innerHTML"&&i(b)}}else b.setAttribute(a,c)}}}},h=[],k;for(k in j)h.push(k);var l="["+h.join("],[")+"]";return{process:i}}();
	i18n.process(document)
	</script>
  </body>
</html> 